<template>
    <div class="index_main">
        <div class="hospital_info">
            <div class="info_l">
                <van-image
                    width="50"
                    round
                    height="50"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
            </div>
            <div class="info_r">
                <p>
                    <span class="title">江苏省人民医院</span>
                    <span class="tag">三级甲等</span>
                </p>
                <p>地址：南京市广州路300号</p>
                <p>电话：<span class="text_phone">024-99615</span></p>
            </div>
        </div>
        <van-cell-group>
            <van-cell @click="navigateTo(res.name)" :title="res.name" :value="`${res.doctor}名医生`" is-link v-for="(res, index) in deptList" :key="index"/>
        </van-cell-group>
    </div>
</template>

<script>
export default {
    data() {
        return {
            deptList: [
                {
                    name: "内科",
                    doctor: 1
                },
                {
                    name: "骨科",
                    doctor: 21
                },
                {
                    name: "骨外科",
                    doctor: 4
                },
                {
                    name: "心胸外科",
                    doctor: 3
                },
                {
                    name: "神经外科",
                    doctor: 3
                },
                {
                    name: "妇产综合科",
                    doctor: 2
                },
                {
                    name: "妇科",
                    doctor: 5
                },
                {
                    name: "产科",
                    doctor: 4
                }
            ]
        };
    },
    methods:{
        navigateTo(title){
            this.$router.push({
                path:"/doctor-list",
                query:{
                    title
                }
            })
        }
    }
};
</script>

<style lang="less" scoped>
.index_main {
    overflow: auto;
    .hospital_info {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        .info_l {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .info_r {
            flex: 1;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            .title {
                color: #333;
                font-size: 16px;
            }
            .tag {
                display: inline-block;
                margin-left: 10px;
                width: 60px;
                height: 18px;
                line-height: 18px;
                font-size: 12px;
                border-radius: 10px;
                text-align: center;
                border: 1px solid #fd8119;
                color: #fd8119;
            }
            p {
                font-size: 12px;
                margin: 0;
                color: #999;
                &:nth-of-type(1) {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                }
            }
        }
    }
}
</style>
